<template>
  <base-content>
    <template>
      <el-main><h2>订单列表</h2></el-main>
      <el-table :data="order" style="width: 100%">
        <el-table-column prop="id" label="订单id" />
        <el-table-column prop="insert_time" label="订单时间" />
        <el-table-column prop="user_id" label="用户id" />
        <el-table-column prop="product_id" label="商品id" />
        <el-table-column prop="order_amount" label="金额" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.consume_status === 2 ? '待消费' : scope.row.consume_status === 1 ? '已完成' : '已消费' }}
          </template>
        </el-table-column>
      </el-table>
      <el-main><h2>商品信息</h2></el-main>
      <el-table :data="product" style="width: 30%">
        <el-table-column prop="product_name" label="商品名称" width="180px" />
        <el-table-column prop="product_attribute" label="商品规格" />
      </el-table>
      <el-main><h2>核销列表</h2></el-main>
      <el-table :data="orderCodeList" style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="code" label="核销码" />
        <el-table-column label="核销码状态">
          <template slot-scope="scope">
            {{ scope.row.code_status === 0 ? '未使用' : '已使用' }}
          </template>
        </el-table-column>
        <el-table-column label="消费状态">
          <template slot-scope="scope">
            {{ scope.row.user_confirm_status === 0 ? '未确认' : '已确认' }}
          </template>
        </el-table-column>
        <el-table-column prop="consume_time" label="使用时间" />
        <el-table-column prop="user_confirm_time" label="用户确认时间" />
        <el-table-column prop="dept_name" label="使用机构门店" />
      </el-table>
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchOrderDetail } from '@/api/verification'

export default {
  data() {
    return {
      order: [],
      orderCodeList: [],
      product: []
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    },
    id() {
      return this.$route.query.id
    }
  },
  created() {
    fetchOrderDetail({
      id: this.id
    }).then((res) => {
      const { order, order_code_list, product } = res.data
      this.order = [order]
      this.orderCodeList = order_code_list
      this.product = [product]
    })
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  width: 100%;
  height: calc(100vh - 50px);
  background: rgb(227, 227, 227);
}
.container img {
  width: 800px;
}
.header {
  background: rgb(227, 227, 227);
  font-size: 30px;
  height: 200px;
  padding-top: 30px;
}
</style>
